<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title>boltDB web-browser</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">

	<!-- jQuery -->
	<script src="/static/js/jquery/jquery.min.js"></script>

	<!-- Icons -->
	<link rel="stylesheet" type="text/css" media="screen" href="/static/css/material-icons.css">

	<!-- CSS files -->
	<link rel="stylesheet" type="text/css" media="screen" href="/static/css/main.css"/>
	<link rel="stylesheet" type="text/css" media="screen" href="/static/css/db.css" />
	<link rel="stylesheet" type="text/css" media="screen" href="/static/css/popups.css"/>

	<!-- JS files -->
	<script src="/static/js/main.js"></script>
	<script src="/static/js/api.js"></script>
	<script src="/static/js/animation.js"></script>
	<script src="/static/js/local_storage.js"></script>
	<script src="/static/js/write_mode.js"></script>
</head>
<body onload="ShowDBList(); PrepareLS();" style="margin: 0px 0px 0px 0px; overflow-y: hidden;">
	<!-- Menu -->
	<div class="menu" id="menu">	
		<div style="float: left; margin: 2px 0px 0px 2px;">
			<i class="material-icons icon btn" onclick="ShowDBsList();" title="Show the list of dbs">list</i>
		</div>
		<div style="padding-top: 5px; display:inline-flex;">
				<a href="https://github.com/ShoshinNikita/boltbrowser" target="_blank" style="color: black; text-decoration: none;" title="Page on GitHub">boltBrowser</a>
		</div>
		<div style="float: right; margin: 2px 2px 0px 0px;">
			<a href="https://github.com/ShoshinNikita/boltbrowser/issues" target="_blank" style="color: black;">
				<i class="material-icons icon" title="Leave feedback">feedback</i>
			</a>
		</div>
	</div>

	<!-- List of dbs -->
	<div class="background" id="dbListBackground">
		<div class="db_list" id="dbList">
			<div style="font-size: 25px; text-align: center; border-bottom: 1px solid black; margin-top: 5px;">
				Databases
				<i class="material-icons btn icon" style="float: right; margin-right: 10px;" onclick="ShowOpenedDBsPaths();" title="Open new db">add</i>
			</div>
			<br>
			<div id="list" style="overflow-y: auto;"></div>
		</div>
	</div>

	<!-- Main div -->
	<div class="db">
		<!-- Info about the current db -->
		<div class="db_info">
			<div style="margin: 5px 5px 5px 5px;">
				<!-- Main info -->
				<div style="float: left;">
					<div id="dbName"><i>Name:</i> ?</div>
					<div id="dbPath" style="font-size: 17px;"><i>Path:</i> ?</div>
					<div id="dbSize" style="font-size: 17px;"><i>Size:</i> ?</div>
					<div id="dbMode" style="font-size: 17px;"><i>Mode:</i> ?</div>
				</div>
				<!-- Search -->
				<div id="searchBox" style="float: right; visibility: hidden;">
					<div style="float: left; font-size: 15px;">
						<input type="text" id="searchText" style="width: 200px; font-size: 17px;">
						<br>
						Regex-mode: <input type="checkbox" id="regexMode" title="Regex-mode">
					</div>
					<!-- Buttons -->
					<div style="float: right;">
						<i class="material-icons icon btn" style="font-size: 35px !important;" title="Search" onclick="Search();">search</i>
						<br>
						<i class="material-icons btn" style=" font-size: 35px !important;" title="Hide results" onclick="ChooseDB(currentDB.dbPath);">close</i>
					</div>
				</div>
			</div>
		</div>
	
		<!-- Path to the current bucket -->
		<div style="height: 20px; border-top: 1px solid black; border-bottom: 1px solid black;">
			<i>
				<div id="currentPath" style="margin: 1px 5px 1px 5px; display: inline-block;"></div>
				<div id="recordsAmount" style="display: inline-block;"></div>
			</i>
		</div>

		<!-- Records -->
		<!-- 135px = db_info (80px) + path (20px) + header (35px) -->
		<div style="height: calc(100% - 135px); overflow: hidden; padding-top: 2px;">
			<div class="db_tree_wrapper" id="dbTreeWrapper">
				<div id="dbTree"></div>
			</div>
			
			<!-- Full record -->
			<div class="record_data" id="recordData">
				<h4 style="border-bottom: 1px solid black;"><i>Record</i></h4>
				<div id="recordPath">?</div>
				<h4 style="border-bottom: 1px solid black;"><i>Value</i></h4>
				<div id="recordValue">?</div>
				<br>
			</div>
		</div>
	</div>

	<div id="openDbWindow" class="background">
		<div class="modal-content" style="text-align: center;">
			<!-- Inputs -->
			<div style="width: 75%; display: inline-block;">
				<input id="DBPathForCreating" style="width: 100%; margin-bottom: 15px; box-sizing: border-box;" placeholder="Path for creating" title="You can enter only a name, in this case a db will be created on the Desktop">
				<input list="paths" id="DBPath" style="width: 100%; box-sizing: border-box;" placeholder="Path for opening a db">
				<datalist id="paths" ></datalist>
				<div style="text-align: left; font-size: 12px; margin-top: 5px;">
					Read-only mode: <input type="checkbox" id="readOnlyCheckbox" title="Turn on read-only mode">
				</div>
				<div id="dbPathsList" style="margin-top: 20px; display: none;"></div>
			</div>
			<!-- Buttons -->
			<div style="width: 80px; text-align: left; display: inline-block; vertical-align: top;">
				<input type="button" value="Create" class="button" style="width: 100%; margin-bottom: 15px;" onclick="CreateDB();">
				<input type="button" value="Open" class="button" style="width: 55px;" onclick="OpenDB();">
				<i class="material-icons btn" style="font-size: 20px !important; vertical-align: middle; float: right;" onclick="SwitchPathsForDeleting();" title="Change the list of paths">settings</i>
			</div>
			<br>
		</div>
	</div>

	<div class="error_popup" id="errorPopup" style="cursor: auto;">
		<i class="material-icons btn" style="float: right; margin: 5px 5px 0px 0px; font-size: 30px !important;" title="Close" onclick="HideErrorPopup();">close</i>
		<div id="popupMessage" style="margin: 5px; word-wrap: break-word;"></div>
	</div>

	<div id="donePopup" class="done_popup">
		<div style="margin: auto; user-select: none;">Done</div>
	</div>

	<!-- Write mode only -->
	<div id="popupMenu" class="popup_menu"></div>

	<div id="addItemWindowBackground" class="background">
		<div class="modal-content" id="addItemWindow">
		</div>
	</div>
</body>
</html>